<template>
    <div class="nurse-member-select-dialog">
      <zdyDialog
        :visible.sync="visible"
        :dialog-title="title"
        :append-to-body="true"
        width="79%" 
        top="3vh"
        max-height="66vh"
        @onSubmit="onSubmit"
        @close="close"
      >
        <el-row class="nurse-member-select-dialog" :gutter="20">
          <!--用户数据-->
          <el-col :span="12">
            <div class="filter-content">
              <div >
                <!-- 搜索 -->
                <label class="el-form-item-label">名称</label>
                <el-input v-model="query.evaluationItems" clearable placeholder="名称" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
                <rrOperation />
              </div>
              <!--表格渲染-->
              <el-table ref="table" v-loading="crud.loading" :data="crud.data" highlight-current-row style="width: 100%;"  @current-change="handleCurrentChange">
                <el-table-column :show-overflow-tooltip="true" prop="evaluationItems" label="名称" /> 
              </el-table>
              <!--分页组件-->
              <pagination />
            </div>
          </el-col>
          <!-- 已选单位 -->
          <el-col :span="12"> 
            <div class="filter-content">
              <div >
                  <!-- 搜索 -->
                  <label class="el-form-item-label">名称</label>
                  <el-input v-model="query.name" clearable placeholder="名称" style="width: 185px;" class="filter-item"  />
                  <span>
                    <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="handleCurrentChange(currObj)">搜索</el-button>
                    <el-button v-if="crud.optShow.reset" class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="query.name='';handleCurrentChange(currObj)">重置</el-button>
                  </span>
              </div>
              <!--表格渲染-->
              <el-table ref="table" v-loading="itemLoading" :data="itemData.content" highlight-current-row style="width: 100%;"  @row-click="singleElection" tooltip-effect="dark"> 
                <el-table-column align="center" width="55" label="选择">
                  <template slot-scope="scope">
                    <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
                    <el-radio class="radio" v-model="templateSelection" :label="scope.row.id"
                      >&nbsp;</el-radio
                    >
                  </template>
                </el-table-column> 
                  <el-table-column prop="sort" label="排序" />
                  <el-table-column prop="name" label="测评明细" show-overflow-tooltip /> 
              </el-table>
              <!--分页组件-->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handlePageChange"
              :current-page="1"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="itemData.totalElements"
              style="margin-top:0.5rem"
            ></el-pagination>
            </div>

          </el-col>
        </el-row>
      </zdyDialog>
    </div>
  </template>
  
  <script>
   
import crudTEvaluation from '@/api/system/tEvaluation'
import crudTEvaluationDtl from '@/api/system/tEvaluationDtl'
  import CRUD, { presenter, header, form, crud } from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import pagination from '@crud/Pagination'
  const defaultForm = { deptId: null, pid: null, subCount: null, name: null, deptSort: null, enabled: 'true', createBy: null, updateBy: null, createTime: null, updateTime: null }
  export default {
    name: 'SysDept',
    dicts: ['dept_status'],
    components: { pagination, crudOperation, rrOperation, udOperation },
    mixins: [presenter(), header(), form(defaultForm), crud()],
    cruds() {
      return CRUD({ title: '测评', url: 'api/tEvaluation', crudMethod: { ...crudTEvaluation }})
    },
    props: {
      tag: {
        type: Array,
        default: () => []
      },
      selectList: {
        type: Array,
        default: null
      },
      dialogVisible: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: ''
      },
      nameList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        permission: {
          add: ['admin', 'sysDept:add'],
          edit: ['admin', 'sysDept:edit'],
          del: ['admin', 'sysDept:del']
        },
        rules: {
          name: [
            { required: true, message: '名称不能为空', trigger: 'blur' }
          ]
        },
        selectedIds: {},
        selectarray: [],
        itemData:{},
        page: 1,
        size: 10,
        itemLoading:false,
        templateSelection:'',
        currObj:{}
      }
    },
    computed: {
      visible: {
        get() {
          return this.dialogVisible
        },
        set(val) {
          this.$emit('update:dialogVisible', val) // visible 改变的时候通知父组件
        }
      }
    },
    watch: {
      dialogVisible: {
        deep: true,
        immediate: true,
        handler(val) {
          if (val) {
            // if (this.nameList) {
            this.$nextTick(() => {
            //   this.selectedIds = {}
            //   const matchList = this.nameList.map(o => this.list.findIndex(e => e.id == o.id))
            //   this.toggleSelection(matchList.map(r => this.list[r]))
            //   this.setTags(this.nameList)
            //   this.checkMembers()
            })
            // }
          }
        }
      }, 
    },
    methods: {
      // 钩子：在获取表格数据之前执行，false 则代表不获取数据
      [CRUD.HOOK.beforeRefresh]() {
        return true
      }, 
      singleElection(row) {
        this.templateSelection = row.id 
        this.selectedIds = row
      },  
      close() {
        this.$refs.multipleTable.clearSelection()
        // this.selectedMember = []
        this.selectarray = []
      }, 
        // 选中测评后，设置测评详情数据
      handleCurrentChange(val) {
        if (val) { 
            const params = {}
            this.currObj = val
            params.evaluationId = val.id
            params.name = this.query.name
            params.page = this.page-1
            params.size = this.size
            crudTEvaluationDtl.list(params).then(res => {
              this.itemData = res
            }) 
            // this.$refs.tEvaluationDtl.query.tEvaluationName = val.evaluationItems
            // this.$refs.tEvaluationDtl.query.evaluationId = val.id
            // this.$refs.tEvaluationDtl.crud.toQuery()
        }
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.size = val
        this.handleCurrentChange(this.currObj)
      },
      handlePageChange(val) {
        console.log(`当前页: ${val}`)
        this.page = val
        this.handleCurrentChange(this.currObj)
      }, 
      onSubmit() {
        if (!this.templateSelection) {
          this.$message({
            type: 'warning',
            message: '请选择'
          })
          return
        }
        this.$emit('select', this.selectedIds)
        this.$emit('update:dialogVisible', false)
      }, 
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .nurse-member-select-dialog {
    .dept-container {
      padding: 10px;
      height: 66vh;
      border: 1px solid #d8d8d8;
      border-radius: 10px;
      .tree-container {
        height: calc(100% - 62px);
        overflow: auto;
      }
    }
    .selected-member-title {
      font-size: 16px;
      font-weight: bold;
      color: #666666;
      margin-bottom: 8px;
    }
    .selected-member-content {
      border: 1px solid #d9d9d9;
      border-radius: 5px;
      height: calc(66vh - 27px);
      padding: 15px;
    }
    ::v-deep .el-table-column--selection > .cell {
      padding-left: 14px;
    }
  }
  </style>
  